<template>
  <div class="mod-home">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="年度">
        <el-select style="width: 120px;" placeholder="年度" v-model="dataForm.year">
          <el-option
            v-for="item in yearList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月份">
        <el-select style="width: 120px;" v-model="dataForm.month" placeholder="月份">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in monthList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>

      </el-form-item>
    </el-form>
    <!--    <ul>-->
    <!--      <li>renren-fast-vue基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-fast" target="_blank">renren-fast</a>后台管理前端功能，提供一套更优的前端解决方案</li>-->
    <!--      <li>前后端分离，通过token进行数据交互，可独立部署</li>-->
    <!--      <li>主题定制，通过scss变量统一一站式定制</li>-->
    <!--      <li>动态菜单，通过菜单管理统一管理访问路由</li>-->
    <!--      <li>数据切换，通过mock配置对接口数据／mock模拟数据进行切换</li>-->
    <!--      <li>发布时，可动态配置CDN静态资源／切换新旧版本</li>-->
    <!--      <li>演示地址：<a href="http://demo.open.renren.io/renren-fast" target="_blank">http://demo.open.renren.io/renren-fast</a> (账号密码：admin/admin)</li>-->
    <!--    </ul>-->
    <!--    <h3>获取帮助</h3>-->
    <!--    <ul>-->
    <!--      <li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>-->
    <!--      <li>前端Git地址：<a href="https://github.com/renrenio/renren-fast-vue" target="_blank">https://github.com/renrenio/renren-fast-vue</a></li>-->
    <!--      <li>后台Git地址：<a href="https://gitee.com/renrenio/renren-fast" target="_blank">https://gitee.com/renrenio/renren-fast</a></li>-->
    <!--      <li>代码生成器：<a href="https://gitee.com/renrenio/renren-generator" target="_blank">https://gitee.com/renrenio/renren-generator</a></li>-->
    <!--      <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>-->
    <!--    </ul>-->
    <!--    <h3>官方QQ群</h3>-->
    <!--    <ul>-->
    <!--      <li>高级群：324780204(大牛云集，跟大牛学习新技能)</li>-->
    <!--      <li>普通群：145799952(学习交流，互相解答各种疑问)</li>-->
    <!--    </ul>-->


    <div class="header_statistics_panel">
      <div class="header_statistics_count_panel">
        <div class="header_content">
          <div class="header_content_item">
            <img src="~@/assets/img/totalshouru.png"/>
            <span class="header_content_count_item">&nbsp;{{ financeObj.totalIncome || 0 }}</span>
            <span class="unit">元</span>
            <p class="header_content_name_item">总收入</p>
          </div>
          <div class="header_content_item">
            <img src="~@/assets/img/shouru.png"/>
            <span class="header_content_count_item">&nbsp;{{ financeObj.netIncome || 0 }}</span>
            <span class="unit">元</span>
            <p class="header_content_name_item">净收入</p>
          </div>
          <div class="header_content_item">
            <img src="~@/assets/img/zhichu.png"/>
            <span class="header_content_count_item">&nbsp;{{ financeObj.totalExpenditure || 0 }}</span>
            <span class="unit">元</span>
            <p class="header_content_name_item">总支出</p>
          </div>
        </div>
      </div>

    </div>
    <div class="chart c-flex ">
      <div class="mybar" id="mybar">
      </div>
      <div class="pie  c-flex">
        <div class="pie_0" id="pie_0"></div>
        <div class="pie_1" id="pie_1"></div>
      </div>
    </div>

  </div>
</template>

<script>
import echarts from 'echarts'
import {barEchart} from '@/utils/bar'
import {pie, pieTwo} from '@/utils/pie'
//import * as echarts from 'echarts'
export default {
  data() {
    return {
      dataForm: {
        month: '',
        year: ''
      },
      monthList: [],
      yearList: [],
      barChart: null,
      pieChart: null,
      pieChart_0: null,
      financeObj: {totalIncome: 100, netIncome: 0, totalExpenditure: 0},
      dataList: null
    }
  },
  mounted() {
    let date = new Date();
    this.dataForm.year = date.getFullYear();
    this.dataForm.month = date.getMonth() + 1;
    this.init()
    this.getDataList();

  },
  methods: {
    init() {
      for (let i = 1; i <= 12; i++) {
        this.monthList.push({label: i + '月', value: i});
      }
      for (let i = 2021; i <= 2030; i++) {
        this.yearList.push({label: i + '年', value: i});
      }
    },
    getDataList() {
      this.$http({
        url: this.$http.adornUrl('/statistic/home'),
        method: 'get',
        params: this.$http.adornParams({
          'year': this.dataForm.year,
          'month': this.dataForm.month
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.list
          this.financeObj.totalIncome = data.in
          this.financeObj.netIncome = data.netIn
          this.financeObj.totalExpenditure = data.out
          this.bar(data.shipmentChart)
          this.pie_0(data.outChart)
          this.pie_1(data.settlementChart)
        }
      })
    },
    bar(data) {
      this.$nextTick(() => {
        // console.log('222')

        let option = barEchart(data, this.dataForm.year + '年')
        if (!this.barChart) this.barChart = echarts.init(document.getElementById('mybar'))
        this.barChart.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      })
    },
    pie_0(data) {
      this.$nextTick(() => {
        // data.map(item=>{
        //   item.value = item.value==0?'12000':item.value
        // })
        let option = pie(data, this.dataForm.month + '月')
        if (!this.pieChart) this.pieChart = echarts.init(document.getElementById('pie_0'))
        this.pieChart.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      })
    },
    pie_1(data) {
      this.$nextTick(() => {
        // console.log('222')

        let option = pieTwo(data, this.dataForm.year + '年')
        if (!this.pieChart_0) this.pieChart_0 = echarts.init(document.getElementById('pie_1'))
        this.pieChart_0.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      })
    }

  }
}
</script>

<style scoped lang="scss">
.mod-home {
  line-height: 1.5;

}

.chart {
  margin-top: 20px;
  height: 400px;

  .mybar {
    width: 50rem;
    height: 310px;
  }

  .pie {
    width: 600px;

    .pie_0 {
      width: 400px;
      height: 300px;
    }

    .pie_1 {
      width: 280px;
      height: 300px;
      //margin-left: 50px;
      padding-left: 0px;
    }
  }
}

.header_statistics_panel {
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .header_statistics_count_panel {
    width: 80%;
    height: 60%;
    border-left: #E0E6F3 solid 1px;

    .header_content {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 50px;

      .header_content_item {
        padding-left: 10px;
        width: 28%;
        height: 100px;
        border-radius: 10px;
        background: #f9f9f9;

        .unit {
          position: relative;
          top: 5px;
        }
      }

      img {
        width: 2rem;
      }

      .header_content_count_item {
        font-size: clamp(1.5rem,1.8rem, 2rem);//动态设置文字大小，它接收三个参数：最小值、首选值、最大值。
       // font-size: 2rem;
        font-weight: bold;
        font-style: italic;
        position: relative;
        top: 6px;
      }

      .header_content_name_item {
        margin-right: .6rem;
        text-align: right;
        font-size: 1rem;
        font-weight: 500;
        color: #666666;
      }

    }
  }

  .header_statistics_count_panel:first-child {
    border-left: #E0E6F3 solid 0;
  }
}
</style>

